<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            #ggk {
                width: 600px;
                height: 400px;
                font-size: 30px;
                font-weight: 900;
                text-align: center;
                line-height: 400px;
                overflow: hidden;
                position: absolute;
                left: 0;
                top: 0;
            }
            #c {
                position: relative;
                /* left: 0;
                top: 0; */
                z-index: 2;
            }
        </style>
    </head>
    <body>
        <canvas id="c" width="600" height="400" style="border: 1px solid #ccc"></canvas>
        <div id="ggk">谢谢惠顾</div>

        <script>
            const cnv = document.getElementById('c')
            const ctx = cnv.getContext('2d')
            let img = new Image()
            img.src = '../image/flower.png'

            // img.onload = function () {
            //     ctx.drawImage(img, 0, 0, 600, 400)
            // }
            ctx.fillStyle = 'pink'
            ctx.fillRect(0, 0, 600, 400)
            ctx.fillStyle = '#aaaaaa'
            ctx.font = 'bold 48px serif'
            ctx.fillText('刮刮卡', 250, 200)

            var isDraw = false

            cnv.onmousedown = function () {
                // alert('1')
                isDraw = true
            }
            cnv.onmouseup = function () {
                isDraw = false
            }
            cnv.onmousemove = function (e) {
                if (isDraw) {
                    var x = e.pageX
                    var y = e.pageY
                    ctx.globalCompositeOperation = 'destination-out'
                    ctx.arc(x, y, 20, 0, (360 * Math.PI) / 180)
                    ctx.fill()
                }
            }
            cnv.ontouchstart = function () {
                // alert('1')
                isDraw = true
            }
            cnv.ontouchend = function () {
                isDraw = false
            }
            cnv.ontouchmove = function (e) {
                if (isDraw) {
                    const touch = e.changedTouches[0]
                    var x = touch.pageX
                    var y = touch.pageY
                    ctx.globalCompositeOperation = 'destination-out'
                    ctx.arc(x, y, 20, 0, (360 * Math.PI) / 180)
                    ctx.fill()
                }
            }
            if (Math.random() < 0.2) {
                console.log('hahah')
                var ggkDiv = document.getElementById('ggk')
                ggkDiv.innerText = '一等奖'
            }
        </script>
    </body>
</html>
